<!-- 自定义表格实例 -->
<template>
    <div class="">
        <custom-table
            :rowContent="rowContent"
            :fixedTitle="fixedTitle"
            :total="total"
            :listLoading="listLoading"
            @fetchData="fetchData"
            @insertRowData="insertRowData"
            @updateRowData="updateRowData"
            @delRowData="delRowData"
            @delSelectionData="delSelectionData"
        ></custom-table>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getList,
  insertRowValue,
  updateRowValue,
  delRowValue
} from "@/api/table";
import CustomTable from "@/components/CustomTable";
import { MessageBox, Message } from "element-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { CustomTable },
  data() {
    //这里存放数据
    return {
      rowContent: [],
      fixedTitle: [],
      dynTitle: [],
      total: 0,
      listLoading: false,
      listQuery: {}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    fetchData(listQuery) {
      this.listQuery = listQuery;
      this.listLoading = true;
      getList(listQuery).then(res => {
        this.rowContent = res.body.rows;
        this.fixedTitle = res.body.fixedTitle;
        this.dynTitle = res.body.dynTitle;
        this.total = res.body.total;
        this.rowContent = this.rowContent.map(v => {
          this.$set(v, "temp_edit", false);
          return v;
        });
      });
      this.listLoading = false;
    },
    //添加行事件
    insertRowData(rowData) {
      insertRowValue(rowData).then(res => {
        if (res.code === 100) {
          this.fetchData(this.listQuery);
        }
      });
    },
    //修改行事件
    updateRowData(rowData) {
      updateRowValue(rowData).then(res => {
        if (res.code === 100) {
          rowData.temp_edit = !rowData.temp_edit;
          this.fetchData(this.listQuery);
        }
      });
    },
    //删除行事件
    delRowData(rowData) {
      MessageBox.confirm("确定删除当前行吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = [];
          data.push(rowData.guid);
          delRowValue(data).then(res => {
            if (res.code === 100) {
              this.fetchData(this.listQuery);
            }
          });
        })
        .catch(e => e);
    },
    //删除选中行事件
    delSelectionData(guids) {
      console.log("guids", guids);
      if (guids.length > 0) {
        MessageBox.confirm("确定删除选中行数据吗?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            delRowValue(guids).then(res => {
              if (res.code === 100) {
                this.fetchData(this.listQuery);
              }
            });
          })
          .catch(e => e);
      } else {
        this.$message({
          message: "请选择需要删除的数据!",
          type: "error"
        });
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>